<template>
    <div class="app-container">
        <div class="project-manage">
            <div class='main-top'>
                <el-form   label-width="90px" :inline="true" :model="formInline" class="form-style">
                    <el-form-item label="售货机编号:">
                        <el-input v-model="formInline.machineNum"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="工控号:">
                        <el-input v-model="formInline.workNum"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="管理司员编号:">
                        <el-input v-model="formInline.marageeNum" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item  label="型号:">
                      <el-input v-model="formInline.type"  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="search()" type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="reSet()" type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="main-nav">
                <div><el-button @click="launchInfo()">数据同步</el-button></div>
            </div>
            <div class="main-table">
                <el-table stripe  :data="tableList" height="500" border style="width: 100%">
                    <el-table-column align="center" prop="number" label="售货机编号" > </el-table-column>
                    <el-table-column align="center" prop="name" label="组织名称" > </el-table-column>
                    <el-table-column align="center" prop="controlNumber" label="工控号" > </el-table-column>
                    <el-table-column align="center" prop="pointName" label="点位名称" > </el-table-column>
                    <el-table-column align="center" prop="modelNumber" label="售货机型号" > </el-table-column>
                    <el-table-column align="center" prop="specifications" label="货道规格" > </el-table-column>
                    <el-table-column align="center" prop="launchDate" label="投放日期" > </el-table-column>
                    <el-table-column  label="操作" width="150">
                        <template slot-scope="scope">
                        <el-button size="mini"  @click="getDetail(scope)">查看货道商品关系表</el-button>
                        </template>
                    </el-table-column>     
                </el-table>
                <div class="block">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalPage"
                        @current-change="handleCurrentChange"    
                    >
                    </el-pagination>
                </div>
            </div>
            <template name='售货机列表'>
                <el-dialog center title="新增项目" :visible.sync="showrRelactiveList">
                  <div class="main-table">
                      <el-table stripe  :data="relactiveList" height="380" border style="width: 100%">
                          <el-table-column align="center" prop="passagewayNumber" label="货道编号" > </el-table-column>
                          <el-table-column align="center" prop="price" label="货道单价（元）" > </el-table-column>
                          <el-table-column align="center" prop="number" label="售卖商品编号" > </el-table-column>
                          <el-table-column align="center" prop="name" label="售卖商品名称" > </el-table-column>
                          <el-table-column align="center" prop="maxNumber" label="货道最大放置数（瓶）" > </el-table-column>
                      </el-table>
                  </div>
                </el-dialog>
            </template>
        </div>
    </div>
</template>
<script>
import {getautoList, getPassagewayList} from '@/api/baseInfo'

export default {
    data() {
        return {
            tableList:[],
            showrRelactiveList:false,
            formInline:{machineNum:'',workNum:'',marageeNum:'',type:''},
            tableLoading:false,
            currentPage:1,
            totalPage:0 ,
            relactiveList:[]
        }
    },
    methods: {
        gettableList(current) {
            let data= 
                {
                "controlNumber": this.formInline.workNum,
                "current": current || this.currentPage,
                "jobNumber": this.formInline.marageeNum,
                "modelNumber": this.formInline.type,
                "number": this.formInline.machineNum,
                "size": 10
                }
            getautoList(data).then(res=>{
                console.log(res)
                this.tableList = res.data.data.records
                this.totalPage = res.data.data.total
                this.tableLoading = false
            }).catch(res=>{
                this.tableLoading = false
                console.log(res)
            })
        },
        reSet() {
            this.formInline = {machineNum:'',workNum:'',marageeNum:'',type:''} 
            this.gettableList()
        },
        getDetail(item) {
            console.log(item)
            const {id} = item.row
            console.log(id)
            this.showrRelactiveList = true
            getPassagewayList(id).then(res=> {
                console.log(res)
                this.relactiveList = res.data.data
            })
        },
        search(){
                this.currentPage = 1
				this.gettableList()
			},
         handleCurrentChange(current) {
            this.gettableList(current)
        },
        launchInfo() {
            
        }
        
    },
    created () {
        this.gettableList()
    }
  
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
    .project-manage{
        .main-top{
            padding: 32px 15px;
            padding-bottom: 20px;
            background-color: #FFF;
            .el-input{
                width: 150px ;
            }
            .el-button{
                padding: 11px 33px;
                margin-left: 5px;
            }
            .el-form-item{
                margin-right: 0px;
            }
        }
        .main-nav{
            @include navStyle
        }
        .addenp{
            .el-form-item{
            margin-bottom: 10px;
            }
            .el-dialog__body{
            padding: 30px 35px;
            padding-bottom: 0px;
            }
            .dialog-footer{
            padding:11px 50px 29px 0px;
            text-align: right;
            .el-button{
                padding: 10px 30px;
                border: none;
            }
            .cancel{
                color: #000;
                background: #E0E0E0;
                border-radius: 3px;
            }
            }
        }
        .block{
            text-align: center;
            margin-top: 15px;
        }
    }
</style>
